<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/jqgrid/ui.jqgrid-bootstrap.css">
    <link rel="stylesheet" href="../../plugins/ztree/css/metroStyle/metroStyle.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link href="../../css/index.css" type="text/css" rel="stylesheet">
    <script src="../../libs/jquery.min.js"></script>
    <script src="../../plugins/layer/layer.js"></script>
    <script src="../../libs/bootstrap.min.js"></script>
    <script src="../../libs/vue.min.js"></script>
    <script src="../../plugins/jqgrid/grid.locale-cn.js"></script>
    <script src="../../plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script src="../../plugins/ztree/jquery.ztree.all.min.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/echarts.js"></script>
    <title>学生图表</title>
</head>
<body>
<nav>
    <img src='./img/bar.png' class="barImg"/><span class="navTitle">教师</span>
</nav>

<section>
    <table>
        <caption>当天教师到达教室时间排名</caption>
        <thead>
        <tr>
            <th>名次</th>
            <th>姓名</th>
            <th>学院</th>
        </tr>
        </thead>
        <tbody id="teacherRankingArriveList">
        <tr>
            <td>第一名</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>第二名</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>第三名</td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
    <table>
        <caption>当天教师最后离开教室时间排名</caption>
        <thead>
        <tr>
            <th>名次</th>
            <th>姓名</th>
            <th>学院</th>
        </tr>
        </thead>
        <tbody id="teacherRankingLeaveList">
        <tr>
            <td>第一名</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>第二名</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>第三名</td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
    <table>
        <caption>当天讲授时长排名</caption>
        <thead>
        <tr>
            <th>名次</th>
            <th>姓名</th>
            <th>学院</th>
        </tr>
        </thead>
        <tbody id="teacherRankingTimeList">
        <tr>
            <td>第一名</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>第二名</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>第三名</td>
            <td></td>
            <td></td>
        </tr>
        </tbody>
    </table>
</section>
<section>
    <div class="detail">
        <div class="detailIcon"></div>
        <div class="detailText">
            <h1>当天教师布置作业情况(次)</h1>
            <p id="todayHomework">0</p>
        </div>
    </div>
    <div class="detail">
        <div class="detailIcon"></div>
        <div class="detailText">
            <h1>本周教师评学统计(次)</h1>
            <p >0</p>
        </div>
    </div>
    <div class="detail">
        <div class="detailIcon"></div>
        <div class="detailText">
            <h1>本周学生评教统计(次)</h1>
            <p>0</p>
        </div>
    </div>
</section>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<select id="select">
    <option value="week">本周</option>
    <option value="term">本学期</option>
</select>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="teacherAttendence" style="width: 600px;height:400px;"></div>
<div id="teacherAttendence1" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var teacherAttendenceChart = echarts.init(document.getElementById('teacherAttendence'));
    var teacherAttendenceChart1 = echarts.init(document.getElementById('teacherAttendence1'));
    $(function() {
        $('#select').on('change', function() {
            var val = $(this).val();
            loadOption(val);
        });
    });
    function loadOption(options) {
        $.ajax({
            url : baseURL + "/TeacherCharts/teachingEvaluation",
            data : {"option":options},
            dataType : "json",
            success : function(result) {
                var option1 = result.list;
                option.title.text=options=="week"?"本周教学效果评价":"本学期教学效果评价";
                for(var j=0;j<option.series.length;j++) {
                    option.series[j].data=[];
                }
                option.xAxis.data=[];
                for(var j=0;j<option.series.length;j++) {
                    for (var i = 0; i < option1.length; i++) {
                        if(j==0)
                            option.series[j].data.push(option1[i].excellent);
                        else if(j==1)
                            option.series[j].data.push(option1[i].good);
                        else if(j==2)
                            option.series[j].data.push(option1[i].poor);
                    }
                }
                for(var i=0;i<option1.length;i++){
                    option.xAxis.data.push(option1[i].name);
                }
                myChart.setOption(option);
                myChart.showLoading();
                myChart.hideLoading();    //隐藏加载动画
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }

        })
        myChart.setOption(option);
    }
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '本周教学效果评价'
        },
        tooltip: {},
        legend: {
            data:['优','良','差']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '优',
            type: 'bar',
            data: []
        },{
            name: '良',
            type: 'bar',
            data: []
        },{
            name: '差',
            type: 'bar',
            data: []
             }
        ]
    };
    var option1 = {
        title : {
            text: '本周教师出勤情况',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} 人"
        },
        legend: {
            orient : 'vertical',
            x : 'left',
            data:['未出勤','已出勤']
        },
        calculable : true,
        series : [
            {
                name:'出勤情况',
                type:'pie',
                radius : '55%',//饼图的半径大小
                center: ['50%', '60%'],//饼图的位置
                data:[{value:30,name:'未出勤'},
                    {value:26,name:'已出勤'}]
            }
        ]
    };
    var option2 = {
        title: {
            text: '近七日教师考勤情况',
            x:'center'
        },
        tooltip: {},
        legend: {
            data:['已考勤数','应考勤数'],
            x:'left'
        },
        xAxis: {
            axisLabel:{
                rotate: 30,
                interval:0
            },
            data: ['11-16','11-17','11-18','11-19','11-20','11-21']
        },
        yAxis: {},
        series: [{
            name: '已考勤数',
            type: 'line',
            data: [12,22,33,44,55,22]
        },
            {
                name: '应考勤数',
                type: 'line',
                data: [22,22,43,44,57,25]
            }
        ]
    };

    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: baseURL + "/TeacherCharts/getTodayTeacherRanking",
            contentType: "application/json",
            success: function(r){
               var teacherRankingArriveListHtml=getHtml(r.teacherRankingArriveList);
                var teacherRankingTimeListHtml=getHtml(r.teacherRankingTimeList);
                var teacherRankingLeaveListHtml=getHtml(r.teacherRankingLeaveList);
                $("#todayHomework").html(r.todayHomework);
                $("#teacherRankingArriveList").html(teacherRankingArriveListHtml);
                $("#teacherRankingTimeList").html(teacherRankingTimeListHtml);
                $("#teacherRankingLeaveList").html(teacherRankingLeaveListHtml);
            }
        });
        // 使用刚指定的配置项和数据显示图表。
        loadOption("week");
        teacherAttendenceChart.setOption(option1);
        teacherAttendenceChart1.setOption(option2);

    });
    function getHtml(data) {
        var htmlData="";
        if(data.length>=0){
        htmlData="<tr><td>第一名</td>"
            +"<td>"+data[0].name+"</td>"
            +"<td>"+data[0].teacherCollege+"</td></tr>";
        }
        if(data.length>=1) {
            htmlData = htmlData + "<tr> <td>第二名</td>"
                + "<td>" + data[1].name + "</td>"
                + "<td>" + data[1].teacherCollege + "</td></tr>";
        } if(data.length>=2) {
            htmlData = htmlData + "<tr> <td>第三名</td>"
                + "<td>" + data[2].name + "</td>"
                + "<td>" + data[2].teacherCollege + "</td></tr>";
        }
        return htmlData;
    }
</script>
</body>
</html>